<template>
<div id="test">
    <div id="side-menu">
        <Menu id="left-menu" mode="vertical" :theme="theme2">
            <Submenu name="1">
                <template slot="title">
                        <Icon type="ios-bookmark" />
                        常用操作
                </template>
                <MenuItem name="1-1" @click.native="init">初始化插件</MenuItem>
                <MenuItem name="1-2" @click.native="createDocument">创建新文档</MenuItem>
                
            </Submenu>
        </Menu>    
    </div>
    <div id="wps-content">
        <div id="wps"></div>
    </div>
</div>
</template>

<script>
import {wps_linux_init} from '../api/wps-linux.js'

let app;
export default {
    name: "wps-linux",
    data() {
        return {
            theme2: 'dark'
        }
    },
    methods: {
        init() {   //初始化插件
            let obj = wps_linux_init("wps", "100%", "100%");
            app = obj.Application;
            if (!app) {
                // 为了兼容
                obj.setAttribute('data', './Normal.dotm');
                var Interval_control = setInterval(
                    function () {
                        app = obj.Application;
                            if (app && app.IsLoad()) {
                                clearInterval(Interval_control);
                                createDocument();
                            }
                        }, 500);
            }
        },
        createDocument() {  //新建文档
            app.createDocument("wps");
        }
    }
}
</script>

<style scoped>
#test {
    display: flex;
    flex-direction: row;
    height: 100%
}
#side-menu {
    overflow: scroll;
    background: #eeeeee;
}
#wps-content {
    margin-left: 5%;
    margin-right: 5%;
    width: 80%;
    height: 100%;
}
#wps {
    height: 80%;
}
#left-menu {
    height: 100%;
}
</style>